<template>
  <div>
    <Modal v-model="modal.add" title="添加" :mask-closable="false" @on-visible-change="changeModalVisibleResetForm('addForm', $event)"
      width="1020">
      <Form ref="addForm" :model="form" :label-width="120" :rules="validateRules">
        <Row>
          <i-col span="12">
           <FormItem label="请选择图文店" prop="graphicId">
             <Select v-model="form.graphicId" style="width:100%">
               <Option v-for="item in graphicList" :value="item.id" :key="item.id">{{ item.twdmc }}</Option>
             </Select>
           </FormItem>
          </i-col>
          <i-col span="12">
            <FormItem label="纸张类型" prop="zzlx">
              <Input v-model="form.zzlx" placeholder="请输入纸张类型" clearable />
            </FormItem>
          </i-col>
          <i-col span="12">
            <FormItem label="颜色" prop="ys">
              <Input v-model="form.ys" placeholder="请输入颜色" clearable />
            </FormItem>
          </i-col>
          <i-col span="12">
            <FormItem label="单双面" prop="dsm">
              <Input v-model="form.dsm" placeholder="请输入单双面" clearable />
            </FormItem>
          </i-col>
          <i-col span="12">
            <FormItem label="价格" prop="price">
              <InputNumber v-model="form.price" placeholder="请输入价格" style="width: 100%;" />
            </FormItem>
          </i-col>
          <i-col span="12">
            <FormItem label="装订" prop="zhuangding">
              <Input v-model="form.zhuangding" placeholder="请输入装订" clearable />
            </FormItem>
          </i-col>
          <i-col span="12">
            <FormItem label="缩印" prop="suoyin">
              <Input v-model="form.suoyin" placeholder="请输入缩印" clearable />
            </FormItem>
          </i-col>

        </Row>

      </Form>
      <div slot="footer">
        <Button type="text" size="large" @click="resetFormCancelModal('addForm', 'add')">取消</Button>
        <Button type="primary" size="large" @click="add" :loading="loading.add">添加</Button>
      </div>
    </Modal>
    <Modal v-model="modal.edit" title="修改" :mask-closable="false" @on-visible-change="changeModalVisibleResetForm('editForm', $event)"
      width="1020">
      <Form ref="editForm" :model="form" :label-width="120" :rules="validateRules">
        <Row>
          <i-col span="12">
           <FormItem label="请选择图文店" prop="graphicId">
             <Select v-model="form.graphicId" style="width:100%">
               <Option v-for="item in graphicList" :value="item.id" :key="item.id">{{ item.twdmc }}</Option>
             </Select>
           </FormItem>
          </i-col>
          <i-col span="12">
            <FormItem label="纸张类型" prop="zzlx">
              <Input v-model="form.zzlx" placeholder="请输入纸张类型" clearable />
            </FormItem>
          </i-col>
          <i-col span="12">
            <FormItem label="颜色" prop="ys">
              <Input v-model="form.ys" placeholder="请输入颜色" clearable />
            </FormItem>
          </i-col>
          <i-col span="12">
            <FormItem label="单双面" prop="dsm">
              <Input v-model="form.dsm" placeholder="请输入单双面" clearable />
            </FormItem>
          </i-col>
          <i-col span="12">
            <FormItem label="价格" prop="price">
              <InputNumber v-model="form.price" placeholder="请输入价格" style="width: 100%;" />
            </FormItem>
          </i-col>
          <i-col span="12">
            <FormItem label="装订" prop="zhuangding">
              <Input v-model="form.zhuangding" placeholder="请输入装订" clearable />
            </FormItem>
          </i-col>
          <i-col span="12">
            <FormItem label="缩印" prop="suoyin">
              <Input v-model="form.suoyin" placeholder="请输入缩印" clearable />
            </FormItem>
          </i-col>

        </Row>

      </Form>
      <div slot="footer">
        <Button type="text" size="large" @click="resetFormCancelModal('editForm', 'edit')">取消</Button>
        <Button type="primary" size="large" @click="edit" :loading="loading.edit">修改</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
  import * as utils from '@/api/utils-v2'
  import * as ResponseStatus from '@/api/response-status'
  export default {
    name: 'GraphicLinkAddEdit',
    data() {
      return {
        modal: {
          add: false,
          edit: false
        },
        loading: {
          add: false,
          edit: false
        },
        urls: {
          addUrl: '/graphic-link/admin/save',
           graphicListUrl: '/graphic/any/getList',
          batchAddUrl: '/graphic-link/admin/batch-save',
          editUrl: '/graphic-link/admin/update',
          batchEditUrl: '/graphic-link/admin/batch-update'
        },
        form: {
          graphicId: null,
          zzlx: null,
          ys: null,
          dsm: null,
          price: null,
          zhuangding: null,
          suoyin: null,

        },
        graphicList: {
        
        },
        validateRules: {
          graphicId: [{
            type: 'integer',
            required: true,
            message: '此项为必须项',
            trigger: 'blur, change'
          }],
          zzlx: [{
              type: 'string',
              required: true,
              message: '此项为必须项',
              trigger: 'blur'
            },
            {
              type: 'string',
              min: 1,
              max: 100,
              message: '必须1-100个字符',
              trigger: 'blur'
            }
          ],
          ys: [{
              type: 'string',
              required: true,
              message: '此项为必须项',
              trigger: 'blur'
            },
            {
              type: 'string',
              min: 1,
              max: 100,
              message: '必须1-100个字符',
              trigger: 'blur'
            }
          ],
          dsm: [{
              type: 'string',
              required: true,
              message: '此项为必须项',
              trigger: 'blur'
            },
            {
              type: 'string',
              min: 1,
              max: 100,
              message: '必须1-100个字符',
              trigger: 'blur'
            }
          ],
          price: [{
            type: 'number',
            required: true,
            message: '此项为必须项',
            trigger: 'blur, change'
          }],
          zhuangding: [{
            type: 'string',
            min: 1,
            max: 255,
            message: '必须1-255个字符',
            trigger: 'blur'
          }],
          suoyin: [{
            type: 'string',
            min: 1,
            max: 255,
            message: '必须1-255个字符',
            trigger: 'blur'
          }],

        },
        dataDictCodes: [],
        dataDictItems: {},
      }
    },
    computed: {},
    mounted() {
      utils.doGet(this.urls.graphicListUrl, {}).then(response => {
        if (response.data.code === ResponseStatus.OK) {
          this.graphicList = response.data.data;
        }
      }).catch(error => {
        this.$Message.error('获取图文列表接口请求失败')
      })
    },
    methods: {
      changeModalVisibleResetForm(formRef, visible) {
        if (!visible) {
          this.$refs[formRef].resetFields()
          this.form.id = null
        }
      },
      resetFormCancelModal(formRef, modal) {
        this.modal[modal] = false
        this.$refs[formRef].resetFields()
        this.form.id = null
      },
      add() {
        this.$emit('add')
      },
      edit() {
        this.$emit('edit')
      }
    }
  }
</script>

<style>
</style>
